<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单新增的type属性</title>

</head>

<body>

    <form action="">
        <br> 用户名:
        <input type="text" name="userName">
        <br>
        <!-- password: 会默认展示密码输入的隐藏圆点·····-->
        密码:
        <input type="password" name="userPassword">
        <br>
        <!-- email提供了默认的电子邮箱的完整验证,要求必须根据邮箱规范输入-->
        邮箱:
        <input type="email" name="userEmail">
        <br>
        <!-- tel提供了在移动端的时候默认打开数字键盘,由于地域问题,并不会实现验证-->
        电话:
        <input type="tel" name="userTel">
        <br>
        <!--	url提供了http协议验证-->
        网址:
        <input type="url" name="userUrl">
        <br>
        <!-- 
	   number提供了数字验证,并提供了数字选择,
	   并且可设置
	   value: 默认值
	   min:   最小值
	   max:   最大值
	   数字类型只能输入数字
	   -->
        数量:
        <input type="number" name="number" value="0" min="0" max="20">
        <br>
        <!-- search:搜索输入框
	   提供人性化的体验,带删除按钮
	   -->
        商品名称:
        <input type="search" placeholder="请输入商品名称">
        <br>
        <!-- 范围-->
        范围:
        <input type="range" max="100" min="0" value="50">
        <br>
        <!-- 颜色拾取器-->
        颜色:
        <input type="color" name="color" id="colorId" value="" />
        <br>
        日期选择器:
				<br>
        <input type="date" name="dateType">
        <br>
				 <!--只有苹果浏览器支持Safari -->
        <input type="datetime" name="datetimeType">
        <br>
        <input type="datetime-local" name="datetimeLocalType">
        <br>
				 <!--月份 -->
				<input type="month">
				<br>
				<input type="week">
				
        <br>
        <input type="submit" value="提交">
        <br>
    </form>

</body>

</html>
